<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/index.css">
    <!-- 引入脚本 -->
    <!--<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>-->
    <!--<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>-->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="5">
            <el-input v-model="search_kw_tag"></el-input>
        </el-col>
        <el-col :span="5" :left="1">
            <el-autocomplete
                    v-model="selected_tag"
                    :fetch-suggestions="querySearchTag"
                    placeholder="请输入内容"
                    size="small"
                    style="width: 100%"
                    @select="handleAppendTag"
                    :trigger-on-focus="false"
                    show-word-limit
            ></el-autocomplete>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="5">
            <el-table
                    ref="multipleTable"
                    height="400px"
                    border
                    highlight-current-row
                    tooltip-effect="dark"
                    :data="father_list"
                    :row-style="{height:'15px'}"
            >

                <el-table-column>
                    <template slot-scope="scope">
                         


                    </template>
                    <!--<li-->
                    <!--v-text="scope.row.tag"-->
                    <!--@click.native="select_father(scope.row)"-->
                    <!--&gt;-->
                    <!--</li>-->
                    <!--<el-input-->
                    <!--v-model="scope.row.tag"-->
                    <!--disabled-->
                    <!--@click.native="select_father(scope.row)">-->
                    <!--</el-input>-->
                    </template>
                </el-table-column>
            </el-table>
            <el-dropdown>
                <span class="el-dropdown-link">
            下拉菜单
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(item, index) in advice_list" :key="index"
                    >
                    </el-dropdown-item>
                </el-dropdown-menu>
                     
            </el-dropdown>
        </el-col>
        <el-col :span="5" :left="1">
            <el-table
                    ref="multipleTable"
                    height="400px"
                    border
                    highlight-current-row
                    tooltip-effect="dark"
                    :data="children_list"
                    :row-style="{height:'15px'}"
            >
                <el-table-column>
                    <template slot-scope="scope">
                        <el-input
                                v-model="scope.row"
                                disabled>
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column>
                    <template slot-scope="scope">
                        <el-button
                                v-model="scope.row"
                                @click="delete_child(scope.$index,scope.row)"
                                type="warning"
                        >
                            删除子标签
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            search_kw_tag: "",
            selected_tag: '',
            father_list: [{num: 4, tag: "5G"}, {num: 10, tag: "6G"}, {num: 100, tag: '7G'}],
            children_list: ["5G概念", '5G', '5GB'],
            advice_list: [{"value": "4G"}, {"value": "通信概念"}]
        },
        methods: {
            select_father: function (row) {
                console.log(row)
                app.children_list = app.children_list
            },
            delete_child: function (index, row) {
                console.log("delete index : " + index)
                app.splice(index, 1)
            },
            querySearchTag(queryString, cb) {
                // let res = app.tag_advices.filter(function (it_) {
                //     return it_['value'].toUpperCase().indexOf(queryString.toUpperCase()) > -1
                // })
                let res = app.advice_list;
                cb(res);
            },
            handleAppendTag(tag) {
                console.log("添加 标签");
                app.children_list.unshift(tag)
            }
        },
        watch: {
            search_kw_tag: function () {
                console.log("重新计算关联的属性")
                app.father_list = app.father_list
            }
        }

    })


</script>
</html>